<template>
  <div>
    <el-card class="sun-el-card">
      <sunUpdataAdd :title="this.$route.meta.title" :tab-list="tabList" />
      <el-table v-loading="listLoading" :header-cell-style="{color:'#000000'}" :data="list" border fit highlight-current-row>
        <el-table-column align="center" label="学年学期" prop="acad_year_term_name" width="200" />
        <!-- 2022-5-21新增 -->
        <el-table-column align="center" label="学院审核时间">
          <template slot-scope="{row}">
            <span v-if="tabItem.value === 'nt'">
              {{ row.principal_start_new_audit_time }} ~ {{ row.principal_end_new_audit_time }}
            </span>
            <span v-if="tabItem.value === 'ot'">
              {{ row.principal_start_old_audit_time }} ~ {{ row.principal_end_old_audit_time }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="专家评审时间">
          <template slot-scope="{row}">
            <span v-if="tabItem.value === 'nt'">
              {{ row.expert_start_new_evaluation_time }} ~ {{ row.expert_end_new_evaluation_time }}
            </span>
            <span v-if="tabItem.value === 'ot'">
              {{ row.expert_start_old_evaluation_time }} ~ {{ row.expert_end_old_evaluation_time }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="教师申报时间">
          <template slot-scope="{row}">
            <span v-if="tabItem.value === 'nt'">
              {{ row.teacher_start_new_commit_time }} ~ {{ row.teacher_end_new_commit_time }}
            </span>
            <span v-if="tabItem.value === 'ot'">
              {{ row.teacher_start_old_commit_time }} ~ {{ row.teacher_end_old_commit_time }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="addData(scope.row), show_dialog = true">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      width="60%"
      class="sun-el-dialog"
      :destroy-on-close="true"
      :lock-scroll="true"
      :close-on-click-modal="false"
      :show-close="false"
      :visible.sync="show_dialog"
    >
      <el-form ref="refForm" :model="formData" :rules="formRules">
        <el-form-item
          label="选择学年学期"
          prop="acad_year_term"
        >
          <el-select v-model="formData.acad_year_term" :disabled="formData.id !== ''" style="width: 100%" placeholder="请选择学年学期">
            <el-option
              v-for="item in acad_year_term_list"
              :key="item.acad_year_term"
              :label="item.acad_year_term_name"
              :value="item.acad_year_term"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="学院审核时间"
          prop="principalAuditTime"
        >
          <el-date-picker
            v-model="formData.principalAuditTime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item
          label="专家评审时间"
          prop="expertPickerTime"
        >
          <el-date-picker
            v-model="formData.expertPickerTime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>

        <el-form-item
          label="教师申报时间"
          prop="teacherPickerTime"
        >
          <el-date-picker
            v-model="formData.teacherPickerTime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" :disabled="requestLoading" @click="show_dialog = false">取 消</el-button>
        <el-button type="primary" size="small" :loading="requestLoading" @click="onFinish">完 成</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get, put, post } from '@/api/request'
import SunUpdataAdd from '@/sun-components/SunUpdataAdd'

export default {
  name: 'Timeset',
  components: { SunUpdataAdd },
  data() {
    return {
      formRules: this.$validateField[this.$route.name],
      requestLoading: false,
      tabList: [
        { id: 1, old_id: 1, name: '课程评价', value: 'ot', type: 'primary' },
        { id: 2, old_id: 1, name: '课程准入', value: 'nt', type: 'mini' }
      ],
      tabItem: { id: 1, old_id: 1, name: '课程评价', value: 'ot', type: 'primary' },
      show_dialog: false,
      list: null,
      listLoading: true,
      acad_year_term_list: [],
      formData: {
        id: '',
        acad_year_term: '',
        expertPickerTime: [],
        teacherPickerTime: [],
        principalAuditTime: []
      }
    }
  },
  created() {
    this.upData()
    this.get_acad_year_term()
  },
  methods: {
    upData() {
      this.requestData()
    },
    addData(row) {
      const _that = this
      if (row) {
        _that.formData.id = JSON.stringify(row.id)
        _that.formData.acad_year_term = row.acad_year_term
        switch (this.tabItem.value) {
          case 'nt':
            _that.formData.expertPickerTime = row.expert_start_new_evaluation_time ? [row.expert_start_new_evaluation_time, row.expert_end_new_evaluation_time] : []
            _that.formData.teacherPickerTime = row.teacher_start_new_commit_time ? [row.teacher_start_new_commit_time, row.teacher_end_new_commit_time] : []
            _that.formData.principalAuditTime = row.principal_start_new_audit_time ? [row.principal_start_new_audit_time, row.principal_end_new_audit_time] : []
            break
          case 'ot':
            _that.formData.expertPickerTime = row.expert_start_old_evaluation_time ? [row.expert_start_old_evaluation_time, row.expert_end_old_evaluation_time] : []
            _that.formData.teacherPickerTime = row.teacher_start_old_commit_time ? [row.teacher_start_old_commit_time, row.teacher_end_old_commit_time] : []
            _that.formData.principalAuditTime = row.principal_start_old_audit_time ? [row.principal_start_old_audit_time, row.principal_end_old_audit_time] : []
            break
        }
      }
      _that.show_dialog = true
    },
    async get_acad_year_term() {
      await get(`acad-year-term?method=post`).then(response => {
        if (response.code === 0) {
          this.acad_year_term_list = response.data
        }
      })
    },
    async tabHeaderSelect(id) {
      const _that = this
      _that.tabList?.forEach((item) => {
        if (item.old_id === id) {
          return false
        }
        if (item.id === id) {
          item.type = 'primary'
          _that.tabItem = item
          _that.upData()
        } else {
          item.type = 'mini'
        }
        item.old_id = id
      })
    },
    async onFinish() {
      const _that = this
      const id = _that.formData.id ? _that.formData.id : false
      const commitment = {
        acad_year_term: _that.formData.acad_year_term
      }
      switch (_that.tabItem.value) {
        case 'nt':
          commitment['expert_start_new_evaluation_time'] = _that.formData.expertPickerTime[0]
          commitment['expert_end_new_evaluation_time'] = _that.formData.expertPickerTime[1]
          commitment['teacher_start_new_commit_time'] = _that.formData.teacherPickerTime[0]
          commitment['teacher_end_new_commit_time'] = _that.formData.teacherPickerTime[1]
          commitment['principal_start_new_audit_time'] = _that.formData.principalAuditTime[0]
          commitment['principal_end_new_audit_time'] = _that.formData.principalAuditTime[1]
          break
        case 'ot':
          commitment['expert_start_old_evaluation_time'] = _that.formData.expertPickerTime[0]
          commitment['expert_end_old_evaluation_time'] = _that.formData.expertPickerTime[1]
          commitment['teacher_start_old_commit_time'] = _that.formData.teacherPickerTime[0]
          commitment['teacher_end_old_commit_time'] = _that.formData.teacherPickerTime[1]
          commitment['principal_start_old_audit_time'] = _that.formData.principalAuditTime[0]
          commitment['principal_end_old_audit_time'] = _that.formData.principalAuditTime[1]
          break
      }
      _that.$refs.refForm.validate(valid => {
        if (!valid) return
        _that.requestLoading = true
        if (id) {
          put(`course/evaluation/setting/${_that.tabItem.value}/${id}`, commitment).then(response => {
            if (response.code === 0) {
              _that.show_dialog = false
              _that.upData()
            }
            _that.requestLoading = false
          })
        } else {
          post(`course/evaluation/setting/${_that.tabItem.value}`, commitment).then(response => {
            if (response.code === 0) {
              _that.show_dialog = false
              _that.upData()
            }
            _that.requestLoading = false
          })
        }
      })
    },
    async requestData() {
      this.listLoading = true
      await get(`course/evaluation/setting/${this.tabItem.value}`, {}, { all: 1 }).then(response => {
        if (response.code === 0) {
          this.list = response.data
        }
        this.listLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/styles/sun-style.scss';
</style>
